---
layout: "docs_api"
version: "1.0.0-beta.1"
versionHref: "/docs"
path: "api/ionic/directive"

title: "Directives in module ionic"
header_sub_title: "26 directives"
doc: "directive"
docType: "directive"
---





<table class="table">
  <tr>
    <th>Name</th>
    <th>Description</th>
  </tr>
  
  <tr>
    <td><a href="/docs/api/directive/ionHeaderBar/">ionHeaderBar</a></td>
    <td><p>Adds a fixed header bar above some content.</p>
</td>
  </tr>
  
  <tr>
    <td><a href="/docs/api/directive/ionFooterBar/">ionFooterBar</a></td>
    <td><p>Adds a fixed footer bar below some content.</p>
</td>
  </tr>
  
  <tr>
    <td><a href="/docs/api/directive/ionCheckbox/">ionCheckbox</a></td>
    <td><p>No different than the HTML checkbox input, except it&#39;s styled differently.</p>
</td>
  </tr>
  
  <tr>
    <td><a href="/docs/api/directive/ionPane/">ionPane</a></td>
    <td><p>A simple container that fits content, with no side effects.  Adds the &#39;pane&#39; class to the element.</p>
</td>
  </tr>
  
  <tr>
    <td><a href="/docs/api/directive/ionContent/">ionContent</a></td>
    <td><p>The ionContent directive provides an easy to use content area that can be configured
to use Ionic&#39;s custom Scroll View, or the built in overflow scrolling of the browser.</p>
</td>
  </tr>
  
  <tr>
    <td><a href="/docs/api/directive/ionRefresher/">ionRefresher</a></td>
    <td><p>Allows you to add pull-to-refresh to a scrollView.</p>
</td>
  </tr>
  
  <tr>
    <td><a href="/docs/api/directive/ionInfiniteScroll/">ionInfiniteScroll</a></td>
    <td><p>The ionInfiniteScroll directive allows you to call a function whenever
the user gets to the bottom of the page or near the bottom of the page.</p>
</td>
  </tr>
  
  <tr>
    <td><a href="/docs/api/directive/ionItem/">ionItem</a></td>
    <td><p>The ionItem directive creates a list-item that can easily be swiped,
deleted, reordered, edited, and more.</p>
</td>
  </tr>
  
  <tr>
    <td><a href="/docs/api/directive/ionList/">ionList</a></td>
    <td><p>The List is a widely used interface element in almost any mobile app,
and can include content ranging from basic text all the way to buttons,
toggles, icons, and thumbnails.</p>
</td>
  </tr>
  
  <tr>
    <td><a href="/docs/api/directive/ionNavBar/">ionNavBar</a></td>
    <td><p>If we have an <a href="/docs/api/directive/ionNavView/"><code>ionNavView</code></a> directive, we can also create an
<code>&lt;ion-nav-bar&gt;</code>, which will create a topbar that updates as the application state changes.</p>
</td>
  </tr>
  
  <tr>
    <td><a href="/docs/api/directive/ionNavBackButton/">ionNavBackButton</a></td>
    <td><p>Creates a back button inside an <a href="/docs/api/directive/ionNavBar/"><code>ionNavBar</code></a>.</p>
</td>
  </tr>
  
  <tr>
    <td><a href="/docs/api/directive/ionNavButtons/">ionNavButtons</a></td>
    <td><p>Use ionNavButtons to set the buttons on your <a href="/docs/api/directive/ionNavBar/"><code>ionNavBar</code></a>
from within an <a href="/docs/api/directive/ionView/"><code>ionView</code></a>.</p>
</td>
  </tr>
  
  <tr>
    <td><a href="/docs/api/directive/ionRadio/">ionRadio</a></td>
    <td><p>No different than the HTML radio input, except it&#39;s styled differently.</p>
</td>
  </tr>
  
  <tr>
    <td><a href="/docs/api/directive/ionScroll/">ionScroll</a></td>
    <td><p>Creates a scrollable container for all content inside.</p>
</td>
  </tr>
  
  <tr>
    <td><a href="/docs/api/directive/ionSideMenus/">ionSideMenus</a></td>
    <td><p>A container element for side menu(s) and the main content. Allows the left
and/or right side menu to be toggled by dragging the main content area side
to side.</p>
</td>
  </tr>
  
  <tr>
    <td><a href="/docs/api/directive/ionSideMenuContent/">ionSideMenuContent</a></td>
    <td><p>A container for the main visible content, sibling to one or more
<a href="/docs/api/directive/ionSideMenu/"><code>ionSideMenu</code></a> directives.</p>
</td>
  </tr>
  
  <tr>
    <td><a href="/docs/api/directive/ionSideMenu/">ionSideMenu</a></td>
    <td><p>A container for a side menu, sibling to an <a href="/docs/api/directive/ionSideMenuContent/"><code>ionSideMenuContent</code></a> directive.</p>
</td>
  </tr>
  
  <tr>
    <td><a href="/docs/api/directive/menuToggle/">menuToggle</a></td>
    <td><p>Toggle a side menu on the given side</p>
</td>
  </tr>
  
  <tr>
    <td><a href="/docs/api/directive/menuClose/">menuClose</a></td>
    <td><p>Closes a side menu which is currently opened.</p>
</td>
  </tr>
  
  <tr>
    <td><a href="/docs/api/directive/ionSlideBox/">ionSlideBox</a></td>
    <td><p>The Slide Box is a multi-page container where each page can be swiped or dragged between:</p>
</td>
  </tr>
  
  <tr>
    <td><a href="/docs/api/directive/ionTabs/">ionTabs</a></td>
    <td><p>Powers a multi-tabbed interface with a Tab Bar and a set of &quot;pages&quot; that can be tabbed
through.</p>
</td>
  </tr>
  
  <tr>
    <td><a href="/docs/api/directive/ionTab/">ionTab</a></td>
    <td><p>Contains a tab&#39;s content.  The content only exists while the given tab is selected.</p>
</td>
  </tr>
  
  <tr>
    <td><a href="/docs/api/directive/ionToggle/">ionToggle</a></td>
    <td><p>An animated switch which binds a given model to a boolean.</p>
</td>
  </tr>
  
  <tr>
    <td><a href="/docs/api/directive/ionView/">ionView</a></td>
    <td><p>A container for content, used to tell a parent <a href="/docs/api/directive/ionNavBar/"><code>ionNavBar</code></a>
about the current view.</p>
</td>
  </tr>
  
  <tr>
    <td><a href="/docs/api/directive/ionNavView/">ionNavView</a></td>
    <td><p>As a user navigates throughout your app, Ionic is able to keep track of their
navigation history. By knowing their history, transitions between views
correctly slide either left or right, or no transition at all. An additional
benefit to Ionic&#39;s navigation system is its ability to manage multiple
histories.</p>
</td>
  </tr>
  
  <tr>
    <td><a href="/docs/api/directive/navClear/">navClear</a></td>
    <td><p>Disables any transition animations between views, along with removing the back
button which would normally show on the next view. This directive is useful for
links within a sideMenu.</p>
</td>
  </tr>
  
</table>


